
 // 路由配置
 import App from "./app.js"; // 引入根组件的模板
 import {routes,parseRoute} from "./router/index.js";

 console.log(1, App);

// 将根组件的模板挂载的 #app元素中
 var vm = new Vue({
     el: "#app",
    //  render(h){
    //     console.log(2,h);
    //     return h(App);  // 将App作为模板 旋绕 #app元素内
    //  },   
     template:App.template,
     data: {
         showComp: null,
     },
     methods: {
         handlerHash() {  // 根据地址栏的hash值(路由地址),找到对应组件渲染
             let hash = location.hash;
             hash = hash.replace("#", "");
             console.log(1111, hash);

             if (hash == "") {
                 hash = "/home"; //如果没有hash值默认为 /home
                 location.hash = hash;  // 在地址栏补一个
             }

             let currentRoute = routes.find(v => v.path == hash);

             if (currentRoute) {
                 this.showComp = currentRoute.component.name;
             }else{
                 currentRoute = routes.find(v => v.path == "*");
                 this.showComp = currentRoute.component.name;
             }
         }
     },
     components: {
         // HomeView:HomeView,
         // ListView,
         // CarView,
         // MineView
         ...parseRoute(routes),
     },
     mounted() {
         // 根组件挂载完毕, 通过URL地址栏中的hash值 => 找到对应的路由路径, 根据路由路径找到组件进行渲染
         this.handlerHash();


         // 监听hash值改变再次处理
         window.addEventListener("hashchange", ()=>{
             this.handlerHash();
         });

     }
 })